<template>
  <div>
    <el-row :gutter="15">        
        <el-form
        ref="elForm"
        :model="info"
        size="medium"
        label-width="135px"
        style="max-width: 1200px"
      > 
        <el-col :span="13">
          <el-form-item label="" prop="">
              <el-checkbox v-model="form.iSaveEnergyEnable" :true-label="1" :false-label="0">启用节能模式</el-checkbox>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label="节能模式亮度" prop="iSaveEnergyBrightness">
            <el-input
              v-model="form.iSaveEnergyBrightness"
              placeholder="请输入节能模式亮度"
              :style="{ width: '100%' }"
            >
              <template slot="append"><span>10-100</span></template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label="常规显示亮度" prop="iNormalBrightness">
            <el-input
              v-model="form.iNormalBrightness"
              placeholder="请输入常规显示亮度"
              :style="{ width: '100%' }"
            >
              <template slot="append"><span>10-100</span></template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button
              type="primary"
              size="medium"
              style="width: 120px"
              @click="submitForm"
              :loading="isLoading"
              >保存</el-button
            >
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import {getNetworPeripheralsFillApi,editNetworPeripheralsFillApi } from "@/api/network";

export default {
  props: {
    info: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      isLoading:false,
      form:{}
    };
  },
  created() {
    this.getInfo();
  },
  methods: {
    submitForm() {
      this.isLoading = true;
      editNetworPeripheralsFillApi(this.form).then(res => {
        this.form = res;
        this.isLoading = false;
        this.$message({
          type: 'success',
          message: '成功!'
        });
      })
    },
    getInfo () {
      getNetworPeripheralsFillApi().then(res => {
        this.form = res;
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.tab-line {
  height: 40px;
  display: flex;
  justify-content: space-between;
  background-color: #f9f9f9;
  align-items: center;
  padding: 0 20px;
  margin-bottom: 10px;
}
</style>